<template>
	<view class="view-contain">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module :leftIcon="'arrow-left'" title="名言警句" />

		<!-- 修改后的自定义标签页切换 -->
		<scroll-view class="custom-tabs-container" scroll-x="true" :scroll-left="scrollLeft" scroll-with-animation>
			<view class="custom-tabs">
				<view v-for="(item, index) in tabList" :key="index"
					:class="['tab-item', currentTab === index ? 'active' : '']" @click="handleTabChange(index)">
					{{ item.name }}
				</view>
			</view>
		</scroll-view>

		<!-- 名言热词列表 -->
		<mescroll-uni :height="`${height}px`" :down="downOption" :up="upOption" @init="mescrollInit"
			@down="downCallback" @up="upCallback">
			<view class="quote-list">
				<view class="quote-item" v-for="(item, index) in quoteList" :key="item.id">
					<view class="quote-index">{{ index + 1 }}</view>
					<view class="quote-content">
						<view class="quote-text">{{ item.quoteNoun }}</view>
						<view class="quote-info">
							<view class="info-item" v-if="item.explanation">
								<u-icon name="info-circle" size="14" color="#666"></u-icon>
								<text>释义：{{ item.explanation }}</text>
							</view>
							<view class="info-item" v-if="item.source">
								<u-icon name="tags" size="14" color="#666"></u-icon>
								<text>出处：{{ item.source }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		famousQuotesList
	} from "@/config/api.js";

	export default {
		mixins: [MescrollMixin], // 使用mixin  
		data() {
			return {
				height: 0,
				currentTab: 0,
				tabList: [
					{
						name: '信念',
						orderBy: 'belief'
					},
					{
						name: '民生',
						orderBy: 'livelihood'
					},
					{
						name: '生态',
						orderBy: 'ecology'
					},
					{
						name: '文化',
						orderBy: 'culture'
					},
					{
						name: '法治',
						orderBy: 'law'
					},
					{
						name: '乡村',
						orderBy: 'village'
					},
					{
						name: '其他',
						orderBy: 'others'
					}
				],
				quoteList: [],
				total: 0,
				downOption: {
					use: true
				},
				upOption: {
					textNoMore: '没有更多了~',
					toTop: {
						right: '24rpx',
						bottom: '60rpx'
					}
				}
			};
		},
		onLoad() {
			const res = uni.getWindowInfo();
			this.height = res.windowHeight - 100; // 100为组件高度
		},
		methods: {
			// 修改后的标签切换方法
			async handleTabChange(index) {
				if (index < 0 || index >= this.tabList.length) return;
				this.currentTab = index;
				this.quoteList = [];
				
				// 计算滚动位置
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.selectAll('.tab-item').boundingClientRect();
					query.exec((res) => {
						if (res[0]) {
							const tabWidth = res[0][index].width;
							const tabLeft = res[0][index].left;
							const screenWidth = uni.getWindowInfo().windowWidth;
							this.scrollLeft = tabLeft + tabWidth/2 - screenWidth/2;
						}
					});
				});
				
				if (this.mescroll) {
					this.mescroll.resetUpScroll(false);
				}
			},
			// 上拉加载
			async upCallback(page) {
				try {
					const currentTab = this.tabList[this.currentTab];
					let params = `?pageNum=${page.num}&pageSize=${page.size}`;
					if (currentTab.orderBy) {
						params += `&field=${currentTab.orderBy}`;
					}

					const res = await famousQuotesList(params);
					if (res && res.rows) {
						this.total = res.total;
						this.mescroll.endBySize(res.rows?.length || 0, res.total);
						if (page.num == 1) this.quoteList = [];
						this.quoteList = this.quoteList.concat(res.rows);
					}
				} catch (error) {
					this.mescroll.endErr();
					uni.$u.toast('获取名言热词失败，请检查网络');
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.view-contain {
		display: flex;
		flex-direction: column;
		background-color: #F5F6F5;
		min-height: 100vh;
	}

	.custom-tabs-container {
		width: 100%;
		white-space: nowrap;
		background-color: #FFFFFF;
		border-bottom: 1px solid #eee;
	}
	
	.custom-tabs {
		display: inline-flex;
		padding: 0 20rpx;

		.tab-item {
			position: relative;
			padding: 24rpx 32rpx;
			font-size: 28rpx;
			color: #666;
			transition: all 0.3s;

			&.active {
				color: #409EFF;
				font-weight: 500;

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 40rpx;
					height: 4rpx;
					background-color: #409EFF;
					border-radius: 2rpx;
				}
			}
		}
	}

	.quote-list {
		padding: 20rpx;
		width: 100%;

		.quote-item {
			display: flex;
			align-items: flex-start;
			background-color: #FFFFFF;
			padding: 24rpx;
			margin-bottom: 20rpx;
			border-radius: 12rpx;

			.quote-index {
				width: 40rpx;
				height: 40rpx;
				background-color: #409EFF;
				color: #FFFFFF;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
			}

			.quote-content {
				flex: 1;

				.quote-text {
					font-size: 30rpx;
					color: #333;
					font-weight: 500;
					line-height: 1.4;
					margin-bottom: 16rpx;
				}

				.quote-info {
					display: flex;
					flex-direction: column;
					gap: 10rpx;

					.info-item {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #666;

						u-icon {
							margin-right: 6rpx;
						}
					}
				}
			}
		}
	}
</style>